<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="container"></div>
    <script>
      // 一、增加元素：创建元素；
      // 获取元素；
      //   var boxEle = document.querySelector(".box");
      //   boxEle.innerHTML = `123`;
      //   console.log(boxEle);
      //   //   直接创建一个元素对象；
      var ele = document.createElement("div");
      ele.innerHTML = "hello";
      ele.className = "active";
      console.log(ele);
      // 把元素对象添加到指定位置   父级元素.appendChild(“元素对象”);
      var containerEle = document.querySelector(".container");
      document.onclick = function () {
        var p = document.createElement("p");
        p.innerHTML = "我是p标签";
        containerEle.appendChild(ele);
        containerEle.appendChild(p);
      };
      // 三 、innerHTML 和 appendChild的区别
      var containerEle = document.querySelector(".container");

      // containerEle.innerHTML = `<div>1111</div>`;

      var div = document.createElement("div");
      div.innerHTML = "1111";
      // containerEle.appendChild(div);

      // containerEle.innerHTML = div; 错误的写法；
      // 1.innerHTML赋值操作 ，后面内容是字符串或者是数字；
      //  2.appendChild是函数执行的写法 ，appendChild添加的内容是对象类型
    </script>
  </body>
</html>
